import React from "react";
import { View, Text } from "@tarojs/components";
import { MoneyFormat } from "@/utils/format";
import './index.scss'

const color = ["#3c88ff", "#f635a8", "#73d03b", "#FAC858", "#f60000", "#a1d3e7", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"]
const BarChart: React.FC<{ list: { name: string, value: number }[] }> = ({ list }) => {

    return (
        <View className="bar-chart font-size24 flex-row" style={{ height: list.length * 80 + 'rpx' }}>
            <View className="container-item">
                {
                    list.map((item, index) => {
                        return <View key={index} className="chart-label font-size24 flex-row flex-item font-otw">
                            <Text>{item.name}</Text>
                        </View>
                    })
                }
            </View>
            <View className="container-item left-line flex1">
                {
                    list.map((item, index) => {
                        return <View className="val-item flex-row flex-item" key={index}>
                            <View className="chart-bar flex-item flex-row" style={{ width: `${item.value * 4.2}rpx`, background: color[index] }}></View>
                            <Text className="chart-val font-size20">{MoneyFormat(item.value)}%</Text>
                            <View className="flex1"></View>
                        </View>
                    })
                }
            </View>
        </View>
    )
}

export default BarChart